<template>
  <div class="count-sales">
    <div class="card">
      <div class="card__header">
        <span class="label">价格牌数量</span>
        <span class="value">{{ topInfo.lockNum }}</span>
      </div>

      <div class="card__container">
        <!-- <e-charts :option="chartOptions" autoresize></e-charts> -->
        <!-- <span class="label">使用中</span>
				<span class="value">{{topInfo.using}}</span> -->
        <ul class="count-sales__cop">
          <li>
            <span>使用中</span>

            <div class="fall">
              <!-- <i class="el-icon-bottom-right"></i> -->
              <!-- <span>-4%</span> -->
              <span>{{ topInfo.using }}</span>
            </div>

          </li>

        </ul>
      </div>

      <div class="card__footer">
        <span class="label">使用率</span>
        <span v-if="!isNaN(((topInfo.using/topInfo.lockNum) * 100).toFixed(2))" class="value">{{ ((topInfo.using/topInfo.lockNum) * 100).toFixed(2) }}%</span>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  props: {
    topInfo: {
      type: Object,
      default: function() {
        return {
          lockNum: 998,
          using: 890
        }
      }
    }
  },
  data() {
    return {
      chartOptions: {
        grid: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0
        },
        xAxis: {
          type: 'category',
          data: [
            '00:00',
            '2:00',
            '4:00',
            '6:00',
            '8:00',
            '10:00',
            '12:00',
            '14:00',
            '16:00',
            '18:00',
            '20:00',
            '22:00'
          ],
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        series: [
          {
            name: '总访问量',
            type: 'line',
            smooth: true,
            showSymbol: false,
            symbol: 'circle',
            symbolSize: 6,
            data: [
              '1200',
              '1400',
              '1008',
              '1411',
              '1026',
              '1288',
              '1300',
              '800',
              '1100',
              '1000',
              '1118',
              '1322'
            ],
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#D1E5FF'
                  },
                  {
                    offset: 1,
                    color: '#FFFFFF'
                  }
                ],
                false
              )
            },
            itemStyle: {
              color: '#4165d7'
            },
            lineStyle: {
              width: 2
            }
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.count-views {
	.card {
		.echarts {
			height: 50px;
			width: 100%;
		}

		&__container {
			padding: 0;
		}

		&__footer {
			border-top: 0;
		}
	}
}
.count-sales {
	&__cop {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 50px;

		li {
			display: flex;
			list-style: none;
			flex: 1;
			color: #d8d8d8;

			.fall,
			.rise {
				display: flex;
				align-items: center;
				margin-left: 10px;
			}

			.fall {
				color: #13ae7c;
			}

			.rise {
				color: #f21e37;
			}
		}
	}
}
</style>
